<template>
<div class="page" > 
  <div class="nav_title">个人中心</div>
	<div class="top_div">
		<div class="flex_sb flex_ac m_top">
			<div class="flex flex_ac">
				<img @click="toPage('peopleInfo')" class="tx" src="~@/assets/img/my/avatar.png" mode=""/>
				<div class="">
					<div class="username flex_ac">
						{{'微信用户'}}
					</div>
				</div>
			</div>

			<div class="flex_ac" v-if="!hasInfo"  @click="toPage('login')">
				前往登录
        <van-icon name="arrow" size="20" color="#333"/>
			</div>
			<div class="flex_ac" v-else @click="toPage('share')">
				<img class="tx_2wm" src="~@/assets/img/my/2wm.png" />
        <van-icon name="arrow" size="20" color="#333"/>
			</div>
		</div>
    <div class="dzmp flex_sb flex_ac" @click="toPage('peopleInfo')">
			<div class="dzmp_text">角色认证</div>
			<div class="dzmp_text1">认证后才能发布信息</div>
			<div class="dzmp_btn">认证</div>
		</div>
	</div>
  <div class="xx_content">
		<div class="xx_title"> 
			我的服务	
		</div>
		<div class="ccc flex_ac flex_sb flex_w">
      <div class='xx_item xx_item1' @click="toPage('myFb')">
        <img src="~@/assets/img/my/icon1.png" mode=""/>
        我的发布
      </div>
      <div class='xx_item xx_item1' @click="toPage('mySc')">
        <img src="~@/assets/img/my/icon2.png" mode=""/>
        我的收藏
      </div>
      <div class='xx_item xx_item1' @click="toPage('sharePage')">
        <img src="~@/assets/img/my/icon3.png" mode=""/>
        邀请好友
      </div>
      <div class='xx_item xx_item1' @click="toPage('huodong')">
        <img src="~@/assets/img/my/icon4.png" mode=""/>
        平台活动
      </div>
    </div>
  </div>
	<div class="h10"> </div>
	<div class="xx_content">
		<div class="xx_title"> 
			常用功能	
		</div>
		<div class="ccc flex_ac flex_sb flex_w">
			<div class='xx_item xx_item1' @click="toPage('jdList')">
				<img src="~@/assets/img/my/icona7.png" mode=""/>
				尽调报告
			</div>
			<div class='xx_item xx_item1' @click="toPage('huiyiMy')">
				<img src="~@/assets/img/my/icona8.png" mode=""/>
				我的会议
			</div>
			<div class='xx_item xx_item1' @click="toPage('yijian')">
				<img src="~@/assets/img/my/icona1.png" mode=""/>
				留言板
			</div>
			<div class='xx_item xx_item1' @click="toPage('kfPage')">
				<img src="~@/assets/img/my/icona2.png" mode=""/>
        客服中心
			</div>
			<div class="w100 h30"></div>
			<div class='xx_item xx_item1' @click="toPage('about')">
				<img src="~@/assets/img/my/icona3.png" mode=""/>
				关于我们
			</div>
      <div class='xx_item xx_item1' @click="toPage('share')">
				<img src="~@/assets/img/my/icona4.png" mode=""/>
				分享
			</div>
			<div class='xx_item xx_item1' @click="toPage('setting')">
				<img src="~@/assets/img/my/icona5.png" mode=""/>
				设置
			</div>
      <div class='xx_item xx_item1' @click="toPage('dingzhi')">
				<img src="~@/assets/img/my/icona6.png" mode=""/>
				定制站点
			</div>
			<div class='xx_item xx_item1'></div>
			<div class='xx_item xx_item1'></div>
		</div>
	</div>
	<Tabbar current="4"></Tabbar>
</div>
</template>

<script>
	// import {} from '@/utils/api.js'
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		data() {
			return {
				hasInfo:false
			}
		},
		components: {
			Tabbar,
		}, 
		created() {
			if(localStorage.token == undefined) {
				this.$router.push({name: 'login'})
			}
		},
		methods:{
			toPage(url){
				this.$router.push(url)
			},
		}
	}
</script>

<style scoped lang="scss">
.phone{
	margin-top:40px;
	width:100%;
	text-align: center;
	z-index: 10;
	color:#888;
	font-size:13px;
}
.nav{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all 0.5s;
}
.input_div{
	display: flex;
	align-items: center;
	border-radius: 2px;
	width: 100%;
	.title{
		font-weight: 500;
		text-align: center;
		font-size: 18px;
		text-align: center;
		width: 100%;
		color: #fff;
	}
}
.ss_div{
	position: absolute;
}
page,.page{
	width: 100%;
	height: 100%;
  background: #fff;
  .nav_title{
    position: absolute;
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    margin-left: 10px;
    z-index: 10;
    top: 30px;
  }
	.top_div{
		position: relative;
		height: 245px;
		width: 100%;
    background: #F9E6CB;
		.dzmp{
			height:30px;
			position: absolute;
			left:20px;
			width:calc(100% - 60px);
			bottom:30px;
			background: linear-gradient(243deg, #211F38, #464763);
			box-shadow: 0px 0px 6px 0px rgba(37,36,64,0.43);
			border-radius: 5px 5px 0 0;
			padding:0 10px;
			.dzmp_text{
				font-size: 14px;
				color: #FFFFFF;
				font-style: italic;
				margin-right:7px;
				font-weight:600;
			}
			.dzmp_text1{
				font-size: 11px;
				color: #C7C7CE;
			}
			.dzmp_btn{
				width: 45px;
				height: 18px;
				background: linear-gradient(90deg, #FFE4B9 0%, #E9B87C 99%);
				border-radius: 9px;
				margin-left:auto;
				text-align: center;
				line-height:18px;
				font-size: 11px;
				color: #211F38;
			}
		}
		.bg{
			position: absolute;
			left: 0;
			top:0;
			width:100%;
			height:100%;
		}
		.m_top{
			position: absolute;
			z-index: 2;
			padding: 15px;
			width: calc(100% - 30px);
			color: #000;
			font-size: 14px;
      top: 70px;
			.tx{
				width: 65px;
				height: 65px;
				border-radius: 50%;
				border: 2px solid rgba(255,255,255,1);
				margin-right: 12px;
			}
			.info_desc{
				font-size: 13px;
				color: #FFFFFF;
				margin-top:5px;
			}
			.username{
				font-weight: bold;
				font-size: 18px;
				color: #000;
				.vip_img{
					height:19px;
					position: relative;
					margin-left:5px;
					font-size: 8px;
					color: #333;
					.ttt{
						line-height:19px;
						margin-left: 19px;
						position: relative;
						z-index:2
					}
					.ttt_a{
						font-size: 9px;
						color: #333;
						line-height:26px;
						margin-left: 25px;
						position: relative;
						z-index:2
					}
				}
				.vip_1{
					position: absolute;
					left:0;
					top:0;
					height:19px;
				}
				.vip_2{
					position: absolute;
					left:0;
					top:0;
					height:19px;
				}
			}
			.tx_2wm{
				height: 25px;
				width: 25px;
				margin-right: 10px;
			}
		}
	}
	.top_div_img{
		position: absolute;
		width: 100%;
		height: 240px;
		z-index: 0;
	}
	.top_div_img1{
		position: absolute;
		width: calc(100% - 40px);
		left: 20px;
		bottom: -16px;
		z-index: 0;
		.img{
			width: 100%;
			border-radius: 0 0 8px 8px;
		}
		.ttt_div{
			position: absolute;
			width: calc(100% - 40px);
			padding: 32px 20px 0;
			top: 0;
			left: 0;
			color: #fff;
			.t_small{
				font-size: 12px;
				text-align: center;
				margin-top: 8px;
			}
			.dl_btn{
				height: 24px;
				background-color: #fff;
				border-radius: 14px;
				font-size: 14px;
				line-height: 24px;
				padding: 0 12px;
				color: #eb7418;
			}
		}
	}
}
// .r_jian{
// 	position: relative;
// 	&::after{
// 		position: absolute;
// 		content:' ';
// 		height: 8px;
// 		width: 8px;
// 		border-right:1px solid #fff;
// 		border-top:1px solid #fff;
// 		transform: rotate(45deg);
// 		top: 5px;
// 	}
// }
.xx_content{
	position: relative;
	top:-30px;
	margin: 0 10px;
	border-radius: 3px;
	background: #fff;
  box-shadow: 0px 3px 6px 0px rgba(236,120,33,0.2), 0px -3px 6px 0px rgba(236,120,34,0.2);
	.xx_title{
		height: 50px;
		padding-left: 10px;
		line-height: 60px;
		font-size: 16px;
		color: #000000;
	}
	.ccc{
		padding: 7.5px 0 15px;
	}
}
.xx_item{
	width: 25%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 13px;
	color: #333;
	img{
		width: 22px;
		height: 22px;
		margin-bottom: 10px;
	}
	.img_small{
		width: 26px;
		height: 26px;
		margin-bottom: 4px;
	}
}
.xx_item1{
	color: #000;
}
.line_div{
	width: 100%;
	height: 8px;
	background-color: #F5F9FA;
}

.line_item{
	border-bottom: 1px solid #F5F9FA;
	padding: 12px 20px;
	font-size: 14px;
	img{
		width:22px;
		height:22px;
		padding:2px;
		margin-right:10px
	}
	.l_l_img{
		width: 22px;
		height: 22px;
		margin-right: 10px;
	}
	.l_l_img1{
		height: 22px;
		margin-right: 15px;
	}
	.l_r_text{
		color:#eb7418;
		font-size: 14px;
		padding-right: 14px;
		position: relative;
		&::after{
			content: ' ';
			position: absolute;
			height: 7px;
			width: 7px;
			border-top: 1px solid #aaa;
			border-right: 1px solid #aaa;
			transform: rotate(45deg);
			top: 6px;
			right: 0;
		}
	}
}
.none_border{
	border:none !important;
}
.line_item1{
	width: 100%;
	border: none;
	font-size: 14px;
	padding: 0;
	height: 22px;
	border-bottom:1px solid #EEEDE9;
	&:last-child{
		border-bottom:none 
	}
}
.item_active{
	background:rgba(0, 0, 0, 0.05) !important;
}
</style>

